<template>
  <div class="container mx-auto max-w-screen-md mb-5">
    <div class="py-3">
      <SearchInput></SearchInput>
    </div>
    <ChooseTabs @choose="handleTabChoose" v-model:tab="tab" :tabs="tabs"></ChooseTabs>
    <div v-if="list.length">
      <PostList :list="list" :item-count="pagination.itemCount" @handleMore="handleMorePost"></PostList>
    </div>
    <n-empty class="p-10" v-else description="你什么也找不到">
      <template #extra>
      </template>
    </n-empty>
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref, watch} from "vue";
import {useRoute} from "vue-router";
import PostList from "@/components/pc/list/PostList.vue";
import api from "@/api";
import SearchInput from "@/components/pc/input/SearchInput.vue";
import ChooseTabs from "@/components/pc/tabs/ChooseTabs.vue";

const keyword = ref('')
const route = useRoute()
const list = ref([])
const tabs = ref(['最近更新', '最新发布', '最多评论', '最多浏览'])
const tab = ref('最近更新')
onMounted(() => {
  if (route.query.keyword) {
    keyword.value = route.query.keyword as string
    orParams.value.title = `%${keyword.value}%`
    orParams.value.content = `%${keyword.value}%`
    orParams.value.username = `%${keyword.value}%`
  }
  handleNewPost()
})
watch(route, () => {
  keyword.value = route.query.keyword as string
  orParams.value.title = `%${keyword.value}%`
  orParams.value.content = `%${keyword.value}%`
  orParams.value.username = `%${keyword.value}%`
  handleNewPost()
})
const pagination = reactive(
    {
      pageSize: 10,
      pageNo: 1,
      itemCount: 0,
    })
const orderParams = ref({
  createdAt: '降序',
  updatedAt: '',
})
const andParams = ref({
  visibility: 'public',
})
const orParams = ref({
  username: '',
  content: '',
  title: '',
})
const handleNewPost = () => {
  list.value = []
  pagination.pageNo = 1
  getPostList()
}
const handleMorePost = () => {
  pagination.pageNo++
  getPostList()
}
const setOrderParams = (arr: Array<any> = []) => {
  Object.keys(orderParams.value).forEach((key: string) => {
    orderParams.value[key as keyof typeof orderParams.value] = ''
  })
  arr.forEach(item => {
    Object.keys(item).forEach((key: string) => {
      orderParams.value[key as keyof typeof orderParams.value] = item[key]
    })
  })
}
const handleTabChoose = () => {
  if (tab.value === '最近更新') {
    setOrderParams([{updatedAt: '降序'}])
  } else if (tab.value === '最新发布') {
    setOrderParams([{createdAt: '降序'}])
  } else if (tab.value === '最多评论') {
    setOrderParams([{comments: '降序'}])
  } else if (tab.value === '最多浏览') {
    setOrderParams([{views: '降序'}])
  }
  handleNewPost()
}
const getPostList = () => {
  window.$loadingBar.start()
  api.post.queryList({
    pageNo: pagination.pageNo,
    pageSize: pagination.pageSize,
    orderParams: JSON.stringify(orderParams.value),
    andParams: JSON.stringify({
      ...andParams.value,
      visibility: 'public'
    }),
    orParams: JSON.stringify(orParams.value)
  }).then(res => {
    res.data.data.records.forEach((item: any) => {
      item.tags = item.tags ? JSON.parse(item.tags) : []
    })
    list.value = list.value.concat(res.data.data.records)
    pagination.itemCount = res.data.data.total
  }).finally(() => {
    window.$loadingBar.finish()
  })
}
</script>

<style scoped>

</style>